import React, { Component, useState } from 'react'
import { Input, Divider, Table, Space, Button, Modal, Form, DatePicker } from 'antd'
import { UnorderedListOutlined } from '@ant-design/icons'
import { getGoods } from '../../api/userslist';
// import { render } from '@testing-library/react';
const { Search } = Input;
//antd表格组件数据
const columns = [
  {
    title: '物料编号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '物料名称',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '物料类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '缩略图',
    key: 'src',
    dataIndex: 'src',
    render: src =><img src={src}  alt=""/>
  },
  {
    title: '申请人',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '区域',
    dataIndex: 'area',
    key: 'area',
  },
  {
    title: '申请时间',
    dataIndex: 'date',
    key: 'date',
  },
  {
    title: '订单状态',
    dataIndex: 'orderstate',
    key: 'orderstate',
  },
  {
    title: '操作',
    key: 'action',
    render: (text, record) => (
      <Space size="middle">
        <a href='/'>编辑</a>
        <a href='/'>删除</a>
      </Space>
    ),
  },
];
//antd点击出现表单
const CollectionCreateForm = ({ visible, onCreate, onCancel }) => {
  const [form] = Form.useForm();
  return (
    <Modal
      visible={visible}
      title="添加物料信息"
      okText="确定"
      cancelText="取消"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then(values => {
            form.resetFields();
            onCreate(values);
          })
          .catch(info => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
      >
        <Form.Item
          name="title"
          label="物料名称"
          rules={[
            {
              required: true,
              message: 'Please input the title of collection!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item name="name" label="申请人">
          <Input type="textarea" />
        </Form.Item>
        <Form.Item name="date" label="申请时间">
          {/* antd选择时间组件 */}
          <DatePicker onChange={onChange} />
        </Form.Item>
      </Form>
    </Modal>
  );
};
//日期组件函数
function onChange(date, dateString) {
  console.log(date, dateString);
}
const CollectionsPage = () => {
  const [visible, setVisible] = useState(false);

  const onCreate = values => {
    console.log('Received values of form: ', values);
    setVisible(false);
  };

  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setVisible(true);
        }}
      >
        添加数据
      </Button>
      <CollectionCreateForm
        visible={visible}
        onCreate={onCreate}
        onCancel={() => {
          setVisible(false);
        }}
      />
    </div>
  );
};
export default class GoodsOrder extends Component {
   state={
     goods:[]
   }
  /**
   * 组件挂载后，ajax 请求物料数据
   */
  componentDidMount() {
    console.log('in')
    getGoods().then(res => {
      this.setState({
        goods: res.body.goodslist
      })
      console.log(this.goods);
      
    }).catch(err => console.log(err))
  
    
  }

  render() {
    return (
      <>
      {/* 搜索框组件 */}
      <Search 
      placeholder="请输入物料名称" 
      onSearch={value => console.log(value)} 
      enterButton 
      style={{ width:'30%',textAlign:'center' }} 
      />
      
      {/* 分割线 */}
      <Divider />
     
      {/* 物品订单表格 */}
      <div style={{ fontWeight:600, color:'#000',marginTop:15}}>
        <UnorderedListOutlined />&nbsp;&nbsp;
         物料订单列表   
      </div>
       {/* 添加订单组件 */}
       <span><CollectionsPage /></span>
     
      <Table 
        columns={columns} 
        dataSource={this.state.goods} 
        rowKey='id'
        pagination = {{
        pageSize:5
        }}
      />
      </>
    )
  }
}